export const addAccordion = (editor) => {
  const { Components } = editor;

    Components.addType('accordionItem', {
        model: {
            defaults: {
                tagName: 'div',
                draggable: '.accordion',
                droppable: false,
                attributes: { class: 'accordion-item',
                    'data-gjs-type':"accordionItem"
                 },
                components: [
                    {
                        type: 'div',
                        attributes: { class: 'accordion-header' },
                        components: [
                            {
                                type: 'text',
                                content: '前端开发工程师',
                                tagName: 'p',
                                attributes: { class: 'accordion-title' }
                            },
                            {
                                type: 'text',
                                tagName: 'span',
                                attributes: { class: 'accordion-icon' },
                                components: [
                                    {
                                        type: 'html',
                                        content: `
                                            <svg t="1721267007321" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5338" width="16" height="16">
                                                <path d="M787.314 543.15 295.508 991.334c-16.138 16.057-42.312 16.057-58.45 0s-16.138-42.107 0-58.162L699.21 512.02 237.058 90.829c-16.138-16.056-16.138-42.107 0-58.163 16.179-16.056 42.312-16.056 58.45 0L787.273 480.85c8.603 8.561 12.288 19.947 11.715 31.13C799.562 523.244 795.876 534.59 787.314 543.15z" fill="#c2c7cd" p-id="5339"></path>
                                            </svg>
                                        `
                                    }
                                ]
                            }
                        ],
                        script: function() {
                            const header = this;
                            header.onclick = function() {
                                const item = header.closest('.accordion-item');
                                const content = item.querySelector(".accordion-content");
                                // 展开/收起当前面板
                                if (item.classList.contains("active")) {
                                    item.classList.remove("active");
                                    content.style.maxHeight = "0";
                                    content.style.padding = "0 15px 0 15px";
                                } else {
                                    // 展开当前面板
                                    item.classList.add("active");
                                    content.style.maxHeight = content.scrollHeight+ 30 + "px";
                                    content.style.padding = "15px";
                                }
                            }
                        }
                    },
                    {
                        type: 'div',
                        attributes: { class: 'accordion-content' },
                        components: [
                            {
                                type: 'text',
                                content: `
                                    前端开发工程师 岗位职责
                                    根据业务、产品需求编写App，Web前辅，实现产品设计方案。
                                    负责参与技术架构设计，重构、优化，根据业务规划及技术规划制定应用架构方案。
                                    技术难题攻关，持续提升核心系统在性能。
                                    摆写技术文档，需求调研，持续优化产品的功能及用户体验，
                                    生职要求:
                                    熟练量握HTML5/CSS/Javascript等前端技术，能独立完成前端开发工作
                                    熟练使用React/Vue等前端幅架
                                    熟西CSS预骑译歪音如5ass、Less等。
                                    熟带前端自动化部署框架，如Grunt，Gulp，熟带Linux卸署环境。
                                    熟悉移动端开发有相关经验。
                                    能够配合层端开发人员完成项目的开发工作(对接)AVA Node等)。
                                    对业界最新的前端技术和实现有浓厚的兴趣及深入的见解。
                                    逻每分析能力强，善于沟道，积极主动，较强的学习能力，具备良好的沟通能力和团队协作精神。
                                    了解Android和I05开发。
                                    简历可以投递至zidiankeii@163.com
                                `
                            }
                        ]
                    }
                ],
                styles: `
                    .accordion-item {
                        border: 1px solid #c2c7cd;
                        margin-bottom: 15px;
                    }
                    .accordion-header {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        padding: 0 15px;
                        cursor: pointer;
                        font-size: large;
                        font-weight: 600;
                    }
                    .accordion-header:hover {
                        background-color: #f5f5f5;
                    }
                    .accordion-icon {
                        font-size: 18px;
                        transition: transform 0.3s;
                    }
                    .accordion-content {
                        padding: 0 15px;
                        max-height: 0;
                        overflow: hidden;
                        transition: max-height 0.3s ease, padding 0.3s ease;
                    }
                    .accordion-content div {
                        margin: 0;
                    }
                    .accordion-item.active .accordion-icon {
                        transform: rotate(90deg);
                    }
                    .accordion-item.active .accordion-content {
                        max-height: 500px;
                        padding: 15px;
                    }
                `
            }
        }
    });

    // 手风琴组件
    Components.addType('accordion', {
        model: {
            defaults: {
                tagName: 'div',
                attributes: { class: 'accordion' },
                components: [
                    {
                        type: 'accordionItem'
                    }
                ],
                styles: `
                    .accordion {
                        border-radius: 4px;
                        overflow: hidden;
                        margin: 0 2%;
                    }
                `
            }
        }
    });
  
  editor.BlockManager.add('accordion', {
    label: '折叠面板',
    category: '栏目类',
    content: { type: 'accordion' },
    media:`<svg t="1721274910502" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5361" width="30" height="30"><path d="M808.5504 288.2304L741.888 354.8928a17.3824 17.3824 0 0 1-24.576 0l-66.6624-66.6624a17.3824 17.3824 0 0 1 12.288-29.6704h133.3248a17.3824 17.3824 0 0 1 12.288 29.6704z" p-id="5362"></path><path d="M806.4 176.64h-588.8A117.76 117.76 0 0 0 99.84 294.4v435.2a117.76 117.76 0 0 0 117.76 117.76h588.8a117.76 117.76 0 0 0 117.76-117.76v-435.2A117.76 117.76 0 0 0 806.4 176.64z m-588.8 30.72h588.8A87.04 87.04 0 0 1 893.44 294.4v435.2a87.04 87.04 0 0 1-87.04 87.04h-588.8a87.04 87.04 0 0 1-87.04-87.04v-435.2a87.04 87.04 0 0 1 87.04-87.04z" fill="#8C929A" p-id="5363"></path><path d="M204.8 486.4m38.4 0l537.6 0q38.4 0 38.4 38.4l0 25.6q0 38.4-38.4 38.4l-537.6 0q-38.4 0-38.4-38.4l0-25.6q0-38.4 38.4-38.4Z" p-id="5364"></path><path d="M204.8 652.8m38.4 0l242.688 0q38.4 0 38.4 38.4l0 25.6q0 38.4-38.4 38.4l-242.688 0q-38.4 0-38.4-38.4l0-25.6q0-38.4 38.4-38.4Z" p-id="5365"></path><path d="M908.8 396.544v30.72H115.2v-30.72z" p-id="5366"></path></svg>`
  });
};
